<template>
  <el-table
    highlight-current-row
    ref="exportHeaderKey"
    :data="tableData"
    :height="height"
    style="width: 98%"
    :border="false"
    :cell-style="{ paddingTop: '4px', paddingBottom: '4px' }"
    @cell-mouse-enter="cellMouseEnter"
    @cell-mouse-leave="cellMouseLeave"
    @keyup="tableDatas"
    @selection-change="handleSelectionChange"
    row-key="rowKeyID"
  >
    <!--    <el-table-column width="10" type="index" >-->
    <el-table-column :reserve-selection="true" type="selection" width="55" />
    <el-table-column label="标签" width="300">
      <template #default="scope">
        <el-autocomplete
          v-model="scope.row.key"
          clearable
          :fetch-suggestions="querySearch"
          placeholder="头部标签"
        />
      </template>
    </el-table-column>

    <el-table-column label="内容" width="400">
      <template #default="scope">
        <el-input v-model="scope.row.value" clearable placeholder="头部内容" />
      </template>
    </el-table-column>

    <el-table-column label="描述" width="220">
      <template #default="scope">
        <el-input
          v-model="scope.row.desc"
          clearable
          placeholder="头部信息简要描述"
        />
      </template>
    </el-table-column>

    <el-table-column>
      <template #default="scope">
        <el-row size="mini">
          <el-button
            size="mini"
            type="info"
            @click="handleEdit(scope.$index, scope.row)"
          >
            <i size="mini" class="iconfont icon-add"></i>
          </el-button>

          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          >
            <i size="mini" class="iconfont icon-delete"></i>
          </el-button>
        </el-row>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import { ref } from "vue";
import { getDict } from "@/utils/dictionary";

export default {
  name: "Header",
  props: {
    save: Boolean,
    // eslint-disable-next-line vue/require-default-prop,vue/require-prop-types
    header: ref(),
    exportHeader: ref(),
    heights: ref(),
  },
  data() {
    return {
      rowKeyID: 0,
      multipleSelection: [],
      headerOptions: [],
      currentRow: "",
      tableData: [{ key: "", value: "", desc: "", rowKeyID: 0 }],
    };
  },
  created() {
    this.typeOption();
    if (this.header && this.header.length !== 0) {
      this.tableData = [];
      this.header.forEach((item) => {
        item["rowKeyID"] = this.rowKeyID++;
        this.tableData.push(item);
      });
    }
    if (this.exportHeader) {
      this.exportHeader.forEach((v) => {
        this.tableData.forEach((item) => {
          if (item.key === v) {
            this.multipleSelection.push(item);
          }
        });
      });

      this.$nextTick(() => {
        this.multipleSelection.forEach((row) => {
          this.$refs.exportHeaderKey.toggleRowSelection(row, true); // 回显
        });
      });
    }
  },
  computed: {
    height() {
      return this.heights - 70;
    },
  },
  watch: {
    tableData: function () {
      this.$emit("headerData", this.tableData);
    },

    header: function () {
      if (this.header && this.header.length !== 0) {
        this.tableData = this.header;
      }
    },
  },
  methods: {
    async typeOption() {
      const res = await getDict("requestHeader");
      res &&
        res.forEach((item) => {
          let header = {};
          header.value = item.label;
          this.headerOptions.push(header);
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.tableDatas();
    },
    tableDatas() {
      let emitdata = [];
      for (let i in this.tableData) {
        if (
          this.tableData[i].desc !== "" ||
          this.tableData[i].key !== "" ||
          this.tableData[i].value !== ""
        ) {
          emitdata.push(this.tableData[i]);
        }
      }
      this.$emit("headerData", emitdata);
      let exportHeader = [];
      this.multipleSelection &&
        this.multipleSelection.map((item) => {
          exportHeader.push(item.key);
        });
      this.$emit("exportHeader", exportHeader);
    },
    querySearch(queryString, cb) {
      const headerOptions = this.headerOptions;
      const results = queryString
        ? headerOptions.filter(this.createFilter(queryString))
        : headerOptions;
      cb(results);
    },

    createFilter(queryString) {
      return (headerOptions) => {
        return (
          headerOptions.value
            .toLowerCase()
            .indexOf(queryString.toLowerCase()) === 0
        );
      };
    },

    cellMouseEnter(row) {
      this.currentRow = row;
    },

    cellMouseLeave(row) {
      this.currentRow = "";
    },

    handleEdit(index, row) {
      this.tableData.push({
        key: "",
        value: "",
        desc: "",
        rowKeyID: this.rowKeyID++,
      });
      this.tableDatas();
    },

    handleDelete(index, row) {
      const data = this.tableData;
      this.$emit("request", data[index].ID);
      data.splice(index, 1);
      this.tableDatas();
      if (data.length === 0) {
        this.handleEdit();
      }
    },

    // 头部信息格式化
    parseHeader() {
      const header = {
        header: {},
        desc: {},
      };
      for (const content of this.tableData) {
        if (content["key"] !== "" && content["value"] !== "") {
          header.header[content["key"]] = content["value"];
          header.desc[content["key"]] = content["desc"];
        }
      }
      return header;
    },
  },
};
</script>

<style scoped></style>
